import React from 'react';
import { useWeb3React } from '@web3-react/core';
import useERC20 from './useERC20Bsc';
import { Box, Button, Typography } from '@mui/material';
// import useERC20 from '@/abi/BscAbi.json';

const MyComponent = () => {
  const { account } = useWeb3React();
  const { name, symbol, balance, transferTo, 
    transferAmount, approvalAmount,totalSupply, setName, setSymbol, 
    setTransferTo, setTransferAmount, 
    setApprovalAmount, transfer, approve ,usdtTransfer} = 
       useERC20('0xFa60D973F7642B748046464e165A65B7323b0DEE','0xE051958FbAA515DF3fCE46DD1335679A09E8A02c')


  return (
    <div>
      <h2>ERC20 Token Contract Interaction</h2>
      <div>
        <h2>Name: {name}</h2>
        <Button onClick={()=>{
          setName
        }}>Get Name</Button>
      </div>  
      <div>
        <h2>Symbol: {symbol}</h2>
        <Button  onClick={()=>{
          setSymbol
        }}>Get Symbol</Button>
      </div>
      <div>
        <h2 >Balance: {balance}</h2>  
        <h2 >总供应量: {totalSupply}</h2>  
      </div>
      <div>
        <h2>Transfer</h2>
        <label>Amount:</label>
        <input type="number" value={transferAmount} onChange={(e) => setTransferAmount(Number(e.target.value))} />
        <br />
        <label>To:</label>
        <input type="text" value={transferTo} onChange={(e) => setTransferTo(e.target.value)} />
        <br />
        <Button onClick={transfer}>Transfer</Button>
      </div>
      {/* <div>
        <h2>usdtTransfer</h2>
        <label>Amount:</label> 
        <input type="number" value={transferAmount} onChange={(e) => setTransferAmount(Number(e.target.value))} />
        <br />
        <label>To:</label>
        <input type="text" value={transferTo} onChange={(e) => setTransferTo(e.target.value)} />
        <br />
        <Button onClick={usdtTransfer}>Transfer</Button>
      </div> */}
      
      <div>
        <h2>Approve</h2>
        <label>Amount:</label>
        <input type="number" value={approvalAmount} onChange={(e) => setApprovalAmount(Number(e.target.value))} />
        <br />
        <Button onClick={approve}>Approve</Button>
      </div>
    </div>
  );
};

export default MyComponent;
